import { useMemo } from'react';
import MdRenderer from '@/components/markdown/MdRenderer';
import LogoIcon from '@/components/logoicon';

const PrologueComponent = ({
    application,
    available,
    type,
    sendMessage
}) => {
    const toQuickQuestion = (match, offset, input) => {
        return `<quick_question>${match.replace('- ', '')}</quick_question>`;
    };

    const prologue = useMemo(() => {
        const temp = available
           ? application?.prologue
            : '抱歉，当前正在维护，无法提供服务，请稍后再试！';
        return temp?.replace(/-\s.+/g, toQuickQuestion);
    }, [available, application]);

    return (
        <div className="item-content mb-16">
            {prologue && (
                <>
                    <div className="avatar">
                        {application.avatar ? (
                            <img src={application.avatar} height="32px" width="32px" />
                        ) : (
                            <LogoIcon height="32px" width="32px" />
                        )}
                    </div>
                    <div className="content">
                        <MdRenderer source={prologue} sendMessage={sendMessage} />
                    </div>
                </>
            )}
        </div>
    );
};

export default PrologueComponent;